<template>
    <div class="Personalschedule">
        <div class="Personalschedule-head">
            <label>
                <span>我的收益</span>
            </label>
            <label class="create-myclass">
                <div class="Timersvalues">
                    <el-date-picker v-model="selectMonth" type="month" placeholder="选择月"   @change="jobSearch" value-format="yyyy-MM"></el-date-picker>
                </div>
                
            </label>
            <span @click="jobSearch()" class="shaixuan">筛选</span>

        </div>
        <div class="Personalschedule-content">
            <div>
                <ul>
                    <li>
                        累计收益<br>
                        <span>{{cumulativeEarnings}}</span>
                    </li>
                    <li>
                        本月收益<br>
                        <span>{{cumulativeMontlyEarnings}}</span>
                    </li>
                    <li>
                        未结算<br>
                        <span>{{not_Account}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="Personalschedule-info">
            <div>
                <ul>
                    <li v-for=" (item,index) in profitInfo" :key="index">
                        <div class="Personalschedule_info_left">
                            <span>{{item.title}}</span>
                            <span class="time">{{item.create_time}}</span>
                        </div>
                        <div class="Personalschedule_info_right">
                            <span>+{{item.earnings}}猫币</span>
                            <span class="time">{{item.earnings_status == 1 ?'未结算':''}}</span>
                        </div>
                    </li>
                    <div  v-if="profitInfo[0] == undefined" style="color:#ccc;text-align:center;margin-bottom:10px;">
                        暂无数据
                    </div>
                </ul>
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'myProfit',
    data(){
        return{
            Timersvalue:new Date,
            total:100,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            selectMonth:'',
            cumulativeEarnings:0,
            cumulativeMontlyEarnings:0,
            not_Account:0,
            profitInfo:[],
            titlecontent:[
					{"Self introduction" : "自我介绍" },
					{"Learning and education" : "学习教育"},
					{"Talk about music" : "聊聊音乐"},
					{"Talk about family" : "聊聊家人"},
					{"Talk about dressing" : "聊聊穿着"},
					{"Talk about friends" : "聊聊朋友"},
					{"Talk about delicious food" : "聊聊美食"},
					{"Festivals and customs" : "节日和习俗"},
					{"Talk about variety show" : "聊聊综艺节目"},
					{"Talk about the near future plan" : "聊聊近期计划"},
					{"Talking about hobbies" : "聊聊爱好"},
					{"Talk about learning" : "聊聊学习"},
					{"Talk about TV series" : "聊聊电视剧"},
					{"Talk about movies" : "聊聊电影"},
					{"Talk about work" : "聊聊工作"},
					{"How to learn the language well" : "怎么学好这个语言"},
					{"About tourism" : "关于旅游"},
					{"Talk about geography" : "聊聊地理"},
					{"Talking about ideals" : "谈谈理想"},
					{"Talk about love" : "聊聊爱情"},
					{"Talk about the weather" : "聊聊天气"},
					{"Talk about some interesting things" : "聊一些趣事"},
					{"Restaurant" : "餐馆"},
					{"Post Office" : "邮局"},
					{"Hospital and health scene" : "医院及健康场景"},
					{"Work and work scenes" : "工作和上班场景"},
					{"Hotel" : "酒店"},
					{"Shopping mall" : "商场购物"},
					{"Public transportation" : "公共交通"},
					{"Airport" : "机场"},
					{"Farm" : "农场"},
					{"Campus" : "校园"},
					{"Travel" : "旅行"},
					{"Supermarket" : "超市"},
					{"Drive" : "驾驶"},
					{"Wedding" : "婚礼"},
					{"Cinema" : "电影院"},
					{"Entertainment place" : "娱乐场所"},
					{"Gymnasium" : "体育馆"},
					{"Museum" : "博物馆"},
					{"Bar or KTV" : "酒吧或KTV"},
				],
        }
    },
    created() {
        this.initData({});
    },
    mounted(){
        
    },
    methods: {
        jobSearch() {
            let a = this.selectMonth.split('-'),
                end_time = new Date(a[0],a[1]).toJSON().substring(0,10);
            let data = {
                end_time : end_time + ' 23:59:59',//this.selectDay + " 23:59:59",
                master_id : this.unserinfo.user_id,
                offset : "+8",
                start_time : this.selectMonth + "-01 00:00:00"//this.selectDay +  " 00:00:00",
            }
            this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryEarningsListPage',
                    params:data,
                }).then((res) =>{
                    console.log(res.data.data,'我的收益')
                    this.profitInfo = res.data.data.userAppointmentEntities
                    this.cumulativeEarnings = res.data.data.cumulativeEarnings
                    this.cumulativeMontlyEarnings = res.data.data.cumulativeMontlyEarnings
                    this.not_Account = res.data.data.not_Account
                    this.profitInfo.map(info=>{
                        let titleL = info.title.split('/'),
                            titleN = '';
                        if (titleL[0] == 'Topic'){
                            titleN = '话题/';
                        }else if (titleL[0] == 'Scene'){
                            titleN = '场景/';
                        }
                        this.titlecontent.map(item=>{
                            for(let x in item){
                                if(titleL[1] == x){
                                    titleN = titleN + item[x]
                                }
                            }
                        })
                        info.title = titleN 
                    })
                    
                    //  userAppointmentEntities[0].title    create_time  
                    //cumulativeEarnings
                    //cumulativeMontlyEarnings
                    //not_Account
                }).catch((error) =>{
                    console.log(error)
                })
        },
        initData(data) {
            //获取当前时间
            var now   = new Date();
            var monthn = now.getMonth()+1 <10?'0'+ (now.getMonth()+1):now.getMonth()+1;
            var yearn  = now.getFullYear();
            this.selectMonth = yearn+"-"+monthn;
            this.getJobListByMonth();
        },
        getJobListByMonth() {
            console.log(this.selectMonth)
            this.jobSearch()
        },
    }
}
</script>
<style lang="less" scoped>
    .Personalschedule{
        position: relative;
        width: 100%;
        border-radius: 20px;
        background: #ffffff;
    }
    /*头部样式*/
    .Personalschedule-head{
        position: relative;
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #2DC7C8;
        label{
            height: 30px;
            &:first-child{
                width: 12%;
                height: 20px;
                color: #2DC7C8;
                font-weight: bold;
                border-left: 8px solid #2DC7C8;
                padding-left: 1%;
            }
        }
    }
    .create-myclass{
        // width: 16%;
        text-align: center;
        line-height: 30px;
        // color: #ffffff;
        // background:rgba(45,199,200,1);
        border-radius:15px;
        margin-left: 10%;
        
    }
    .shaixuan{
        display: inline-block;
        background-image: url('/images/icon 拷贝@2x.png');
        background-repeat: no-repeat;
        background-position-y: 49%;
        background-position-x: 30%;
        cursor: pointer;
        width: 16%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #47cecf;
        border-radius: 20px;
        color: #fff;
    }
    .Timersvalues{
        position: absolute;
        top: 20px;
        right: 174px;
        .el-input{
            width: 116px;
        }
            // el-input__inner{
            //     border-radius: 10px;
            //     border: solid 1px #47cecf;
            //     color: #47cecf;
            //     width: 53%;
            // }
    }
    .screenings{
        width: 10%;
        padding-left: 2%;
        span{
            display: inline-block;
            width: 100%;
            height: 30px;
            background:rgba(71,206,207,1);
            border-radius:15px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
    }
    /*内容样式*/
    // .Personalschedule-content{
    //     position: relative;
    //     width: 90%;
    //     margin: 0 auto;
    // }
    /*tabs选项卡切换*/
    .Personalschedule-info{
        margin: 0 auto;
        position: relative;
        width: 100%;
        height: auto;
        
        span{
            display: block;
        }
        ul{
            list-style: none;
            height: 100px;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            display: inline-table;
            width: 95%;
            padding-left:20px;
            li{
                width: 100%;
                height: 50px;
                line-height: 25px;
                border:1px solid transparent;//解决点击选中后变形问题
                text-align: center;
                border-bottom: solid 1px #cccccc;
                margin-top: 2px;
                padding: 10px 10px 10px 10px;
                .time{
                    color: #cccccc;
                    font-size: 12px;
                }
            }
        }
    }
    .Personalschedule_info_left{
        float: left;
    }
    .Personalschedule_info_right{
        float: right;
    }
    .Personalschedule-content{
        margin: 0 auto;
        position: relative;
        width: 737px;
        height: 122px;
        border-radius: 20px;
        background: #f6f6f6;
        ul{
            display: flex;
            list-style: none;
            height: 50px;
            align-items: center;
            justify-content: center;
            padding: 0;
            li{
                width: 16%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                color: #2e2e2e;
                font-weight: bold;
                span{
                    color: #aaaaaa;
                    font-size: 14px;
                }
            }
        }
    }
    .navelecet{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8!important;
    }
    /*列表样式*/
    .Personalschedule-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
            }
        }
    }
    .Personalschedule-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Personalschedule-class-List-content>label:first-child{
        width: 34%;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .Personalschedule-class-Info{
        width: 50%;
        height: 70%; 
        padding-left: 6%;
        h2{
            color: #555555;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 0;
        }
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 10%;
                    text-align: left;
                }
            }
        }
    }
    .Personalschedule-class-Info>.Personalschedule-class-Infos{
        display: flex;
        align-items: center;
        margin-top: 10px;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 70%;
        }
    }
    .Isopenclasses{
        justify-content: flex-end;
        span{
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Personalschedule-class-info-head{
        span{
            display:flex;
            margin-left: 0!important;
            overflow: hidden;
            color: #555555;
            font-size: 18px;
            font-weight: bold;
        }
    }
    .Personal-training>span{
        margin-left: 0!important;
        font-size: 16px;
        font-weight: bold;
    }
    .Personal-training-footer{
        display: flex;
        justify-content: flex-end;
        color: #2DC7C8;
        span{
            cursor: pointer;
        }
    }
</style>